<template>
    <div class="reg-box">
        <van-nav-bar title="新用户注册"
            left-arrow
            @click-left="router.go(-1)"/>
        <div class="content">
            <div class="my-form">
                <van-form>
                    <van-cell-group inset style="margin: 0 0 16px;">
                        <van-field v-model="user.name"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"/>
                        <van-field v-model="user.password"
                            name="用户密码"
                            label="用户密码"
                            placeholder="用户密码"
                            :rules="[{ required: true, message: '请填写用户密码' }]"/>
                        <van-field name="uploader" label="头像上传">
                            <template #input>
                                <van-uploader max-count="1" v-model="user.photo" />
                            </template>
                        </van-field>
                        <van-field name="radio" label="单选框">
                            <template #input>
                                <van-radio-group v-model="user.sex" direction="horizontal">
                                    <van-radio checked-color="#006d75" name="男">男</van-radio>
                                    <van-radio checked-color="#006d75" name="女">女</van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>
                        <van-field v-model="user.address"
                            is-link
                            readonly
                            name="area"
                            label="地址选择"
                            placeholder="点击选择地址"
                            @click="showAddress = true"/>
                        <van-field v-model="user.birthday"
                            is-link
                            readonly
                            name="datePicker"
                            label="生日"
                            placeholder="点击选择生日"
                            @click="showBirthday = true"/>
                        <van-field v-model="user.phone"
                            name="电话号码"
                            label="电话号码"
                            placeholder="电话号码"
                            :rules="[{ required: true, message: '请填写电话号码' }]"/>
                        <van-field v-model="user.email"
                            name="邮箱"
                            label="邮箱"
                            placeholder="邮箱"
                            :rules="[{ required: true, message: '请填写邮箱' }]"/>
                        <van-field v-model="user.remark"
                            name="备注"
                            label="备注"
                            rows="2"
                            autosize
                            placeholder="备注"
                            type="textarea"
                            maxlength="100"
                            show-word-limit
                            :rules="[{ required: true, message: '请填写备注' }]"/>
                    </van-cell-group>
                </van-form>
            </div>
            <van-button type="primary" square
                style="margin-bottom: 16px;"
                color="linear-gradient(to right, #36cfc9, #00474f)" block>注册</van-button>
        </div>

        <van-popup v-model:show="showAddress" position="bottom">
            <van-area :area-list="areaList"
                @confirm="pickAddress"
                @cancel="showAddress = false"/>
        </van-popup>

        <van-popup v-model:show="showBirthday" position="bottom">
            <van-date-picker @confirm="pickBirthday"
                :max-date="maxDate"
                :min-date="minDate"
                @cancel="showBirthday = false" />
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
import { Ref, ref } from "vue";
import { Router, useRouter } from "vue-router";
import { areaList } from '@vant/area-data'
import dayjs from 'dayjs'

const router: Router = useRouter()
const minDate: Date = new Date(dayjs().subtract(50, 'year').format())
const maxDate: Date = new Date(dayjs().subtract(20, 'year').format())

console.log()
const user: Ref<UserInfo> = ref({
    id: '',
    name: '',
    password: '',
    photo: [],
    sex: '女',
    address: '',
    birthday: '',
    phone: '',
    email: '',
    remark: ''
})
const showAddress: Ref<boolean> = ref(false)
const showBirthday: Ref<boolean> = ref(false)

/** 选择地址的确认方法 -- 对象解构，得到的是别名 */
function pickAddress({selectedOptions: list}: any) {
    user.value.address = list.map((it: any): string => it.text).join('/')
    showAddress.value = false
}

/** 选择生日 */
function pickBirthday({selectedValues: list}: any) {
    user.value.birthday = list.join('/')
    showBirthday.value = false
}
</script>

<style lang="less" scoped>
@import "../../style/common.less";
.reg-box {
    .rel();
    > .content {
        padding: 0 @pagePadding;
        height: calc(100vh - var(--nav-height));
        > .my-form {
            padding: @pagePadding;
            height: calc(100% - 3rem);
            margin: 0 -@pagePadding;
            overflow-x: hidden;
        }
    }
}
</style>